import React, {Component} from 'react';
import {connect} from 'dva';
import {routerRedux} from 'dva/router'
import moment from 'moment';
import Mock from 'mockjs'
import {Tabtitle} from '../../../../components'
import {
	Card, Row, Col,Table,message,
	Form,DatePicker,Select,Button,
 } from 'antd';

import echarts from 'echarts'

import style from './home.less'

import {
	MyCharts,
	NoData,
	DataNone,
	NumberWithColor,
	IncomeTrend
} from '../../../../components'

import {

  ProlistSelect,
	TimeRangeSelect,
	DateRangePicker,
	BenchCodeSelect,
	// PdtSelect,
	// BenchCodeSelect2,

} from '../../../../components/ToolbarItem'



const FormItem = Form.Item;
const Option = Select.Option;
const RangePicker = DatePicker.RangePicker;

/**
 * [Toolbar Component]
 * @param {[type]} product       [description]
 * @param {[type]} productList   [description]
 * @param {[type]} timeRangeList [description]
 * @param {[type]} timeRange  [description]
 * @param {[type]} benchCodeList [description]
 * @param {[type]} cBenchCode  [description]
 * @param {[type]} beginDate     [description]
 * @param {[type]} endDate       [description]
 * @param {[type]} pathname      [description]
 * @param {[type]} dispatch      [description]
 */
 const Toolbar=({
		tag,
		productList,
		timeRangeList,
		benchCodeList,
		timeRange,
		cBenchCode,
		lPortId,
		beginDate,
		endDate,
		dispatch,
		ListPdt,
		isShow,
		pdtsearchId,
		onePdt,
		BpdtsearchId,
		BListPdt,
		BisShow,
		location:{
			pathname,
			query
		}
	})=>{
console.log('bbbbb',ListPdt,BListPdt)
		const queryData=() => {
			if(!lPortId){
				message.warning('请选择组合');
			}else{
				if(timeRange==='0'){
					if(!(beginDate&&endDate)){
						message.warning('请选择时间！');
					}else{
						if(!cBenchCode){
							message.warning('请选择业绩基准！');
						}else{
						dispatch({
							type: `${tag}/changeRouter`,
							query,
							payload:{
								pathname,
								query:{
									lPortId,
									timeRange,
									cBenchCode,
									beginDate,
									endDate
								}
							}
						})
					}
					}
				}else{
					if(!cBenchCode){
						message.warning('请选择业绩基准！');
					}else{

						dispatch({
							type: `${tag}/changeRouter`,
							query,
							payload:{
								pathname,
								query:{
									lPortId,
									timeRange,
									cBenchCode
								}
							}
						})
				}

				}
			}

		}

		return(
			<div className={`toolbar ${style.toolbar}`}>
				<Form layout="inline">
					<Row type="flex" justify="start" align="middle">
						<Col>
							<FormItem
								label="组合"
							>
								<ProlistSelect
									data={ListPdt}
									value={lPortId&&ListPdt[0].id!=''?ListPdt.find(item=>item.id==lPortId).value:''}
									dispatch={dispatch}
									tag={tag} />
								{/*<PdtSelect
							  	dispatch={dispatch}
							  	tag='overview'
							  	data={ListPdt}
							  	isShow={isShow}
							  	pdtsearchId={pdtsearchId}
							  	onePdt={onePdt}
							  />*/}
							</FormItem>
						</Col>
						<Col>
							<FormItem
								label="时间区间"
							>
								<TimeRangeSelect
									data={timeRangeList}
									value={timeRange&&timeRangeList[0].value!=''?timeRangeList.find(item=>item.value==timeRange).name:''}
									dispatch={dispatch}
									tag={tag}/>

							</FormItem>
							{
								timeRange==="0"?<FormItem >
									<DateRangePicker
										beginDate={beginDate}
										endDate={endDate}
										dispatch={dispatch}
										tag={tag}/>
								</FormItem>:null
							}
						</Col>
						<Col>
							<FormItem
								label="业绩基准"
							>
								<BenchCodeSelect
									data={BListPdt&&BListPdt.filter(item=>item.id!=lPortId).filter(item=>item.id!='0')}
									value={cBenchCode&&BListPdt[0].id!=''?BListPdt.find(item=>item.id==cBenchCode).value:''}
									dispatch={dispatch}
									tag={tag} />
								{/*<BenchCodeSelect2
							  	dispatch={dispatch}
							  	tag='prolist'
							  	data={ListPdt}
							  	BpdtsearchId={BpdtsearchId}
							  	BenchCode ={cBenchCode}
							  />*/}

							</FormItem>
						</Col>
						<Col>
							<Button type="primary" onClick={queryData}>
								查询
							</Button>
						</Col>
					</Row>
				</Form>
			</div>
		)
 }

/**
 * [ProfitTable Component]
 * @param {[type]} columns [description]
 * @param {[type]} datas   [description]
 */
const ProfitTable =({columns,datas})=>{
	const profitColumn=columns.map(column=>column.value)
	const profitData=[]
	datas.map((data,i)=>{
		const newData={}
		columns.map(column=>{
			newData[column.key]=data[column.key]
		})
		newData.id=i
		profitData.push(newData)
	})

	const profitTable={
		columns:columns.map((item,i)=>({
			title: item.value,
			dataIndex: item.key,
			key: item.key
		})),
		dataSource:profitData,
		rowKey:'id'
	}

	return (
			<div className={style.table}>
				<Table {...profitTable} pagination={false} size="small"/>
			</div>
		)
}

/**
 * [RiskCharts Component]
 * @param {[type]} data [description]
 */
const RiskCharts =({data})=>{

	const radar=data[0].data.map(item=>({
		name:item.name,
		min:item.min,
		max:item.max
	}))

	const datas=data.map(item=>({
		name:item.name,
		value:item.data.map(v=>v.value)
	}))



	const riskCharts={
		charts:{
			option:{
				color:['#ff6f00','#5d6bff','#00e6ff','#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
				legend: {
						orient: 'vertical',
						// right: "10%",
						bottom: 10,
						data: datas.map((item, i) => ({
							name:item.name,
							icon:'circle'
						})),
						itemWidth:5,
						itemHeight:5
				},
				tooltip: {
					confine: true,
					// trigger: 'axis',
					// formatter: '{c0}'
				},
				// grid: {
				//     left: '5%',
				//     right: '5%',
				//     bottom: '5%',
				//     top:"25%",
				//     containLabel: true
				// },
				radar: {
						// shape: 'circle',
						// name: {
						//     textStyle: {
						//         color: '#fff',
						//         backgroundColor: '#999',
						//         borderRadius: 3,
						//         padding: [3, 5]
						//    }
						// },
						indicator: radar,
						center: ['50%','47%'],
							 radius: 100
				},
				series: datas.map((item,i)=>({
					name:item.name,
					type: 'radar',
					symbol:"circle",
					symbolSize: 8,
					data:datas
				}))
		}
		}
	}
	return (
			<div className={style.riskCharts}>
				<MyCharts {...riskCharts}/>
			</div>
		)
}

/**
 * [AssetCharts Component]
 * @param {[type]} data [description]
 */
const AssetCharts =({data})=>{
	const assetsData=data.map((item,i)=>(
		{
			value:item[1], name:item[0]
		}
	))
	const assetCharts={
		charts:{
			option:{
				color:['#ff8f00','#de7aef','#cddc39','#56a7e8','#4fc3d2','#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
				tooltip: {
					trigger: 'item',
					formatter: "{b} : {c} ({d}%)"
				},
				legend: {
					orient: 'vertical',
					left: '10%',
					top: 'center',
					data: assetsData.map((item, i) => ({
						name:item.name,
						icon:'circle'
					})),
					itemWidth: 8,
					itemHeight: 8
				},
				series: [
					{
						type: 'pie',
						radius: '70%',
						center: [
							'60%', '50%'
						],
						label: {
							normal: {
								show:false,
								// formatter: '{b}: {d}%'
							}
						},
						data: assetsData,
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			}
		}
	}
	return (
			<div className={style.assetCharts}>
				<MyCharts {...assetCharts}/>
			</div>
		)
}

/**
 * [ScoreTable Component]
 * @param {[type]} data [description]
 */
const ScoreTable =({data})=>{
	const keys=[]
	for(var key in data.data[0]){
	keys.push(key)
	}

	const scoreTable={
		columns:data.column.map((item,i)=>({
			title: item,
			dataIndex: keys[i+1],
			key: keys[i+1]
		})),
		dataSource:data.data,
		rowKey:'id'
	}

	return (
			<div className={style.scoreTable}>
				<Table {...scoreTable} pagination={false} size="small" scroll={{y:260}}/>
			</div>
		)
}

/**
 * [Overview Component 入口组件]
 * @param {[type]} dispatch [description]
 * @param {[type]} overview [description]
 * @param {[type]} location [description]
 * @param {[type]} query    [description]
 */
const Overview = ({dispatch, overview,prolist,income,kpi,location}) =>{
	const {
		lPortId,
		timeRange,
		cBenchCode,
		beginDate,
		endDate,
		ListPdt,
		isShow,
		pdtsearchId,
		onePdt,
		BListPdt,
	}=overview
console.log('Overview',overview)
	const {
		productList,
		timeRangeList,
		benchCodeList,
		BpdtsearchId,
		BisShow,
	}=prolist

	const {
		series
	}=income

	const {
		products,
		risk,
		assetAllocation,
		score
	}=kpi


	const {pathname,query}=location
	const tag='overview'
	const toolbarProps={
		tag,
		...overview,
		...prolist,
		dispatch,
		location
	}
	console.log(9990,series,productList,benchCodeList);
	
	return (
		<div className={`equity ${style.root}`}>
			<Tabtitle value={'产品仪表盘'}/>
			<div className="content-inner">
				<Toolbar {...toolbarProps}/>
				{
					(series&&series.length)||(products&&products.columns)||(risk&&risk.length&&risk[0].id)?
					(<div className="main-content">
						<Row>
							<Col span={14}>
								<Card title="组合收益" bordered={false}  className={`module ${style.profit}`}>
									<div className="wrap">
										{
											series&&series.length&&ListPdt&&ListPdt.length&&BListPdt&&BListPdt.length?
											<IncomeTrend
												data={series}
												benchName={query.cBenchCode?BListPdt.find(item=>item.id===query.cBenchCode).value:''}
												product={query.lPortId?ListPdt.find(item=>item.id===query.lPortId):{"id":"","value":""}}/>:<DataNone />
										}
										{
											products&&products.columns?<ProfitTable {...products}/>:<DataNone />
										}
									</div>
								</Card>
							</Col>
							<Col span={10}>
								<Card title="风险指标" bordered={false}  className={`module ${style.risk}`}>
									<div className="wrap">
										{
											risk&&risk.length&&risk[0].id?<RiskCharts data={risk}/>:<DataNone />
										}
									</div>
								</Card>
							</Col>
						</Row>
						{
							(assetAllocation&&assetAllocation.length)||(score&&score.length)?
						<Row>
							<Col span={14}>
								<Card title="资产占比" bordered={false}  className={`module ${style.assets}`}>
									<div className="wrap">
										<AssetCharts data={assetAllocation} />
									</div>
								</Card>
							</Col>
							<Col span={10}>
								<Card title="交易员打分" bordered={false}  className={`module ${style.score}`}>
									<div className="wrap">
										<ScoreTable data={score} />
									</div>
								</Card>
							</Col>
						</Row>:null
					}
					</div>):<NoData />
				}
			</div>
		</div>
	)

}

Overview.propTypes = {
};

export default connect(({overview,prolist,income,kpi}) => ({overview,prolist,income,kpi}))(Overview);
